<template>
  <div id="asideTree" class="aside-tree">
    <div class="el-scrollbar" v-scrollBar>
      <el-tree
        :data="treeResult"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-drag-end="handleDragEnd"
        @node-click="changeCategory"
        @node-drag-enter="dragEnter"
        ref="tree"
        :draggable="draggable"
        :allow-drop="allowDrop"
        :highlight-current="true"
      >
        <div
          class="custom-tree-node"
          @mouseover="handlerOver(data)"
          @mouseleave="handlerMouseLeave"
          slot-scope="{ node, data }"
          style="cursor: pointer"
        >
          <img
            class="categoryPic"
            v-if="data.thumbnailPicUrl && isProduct"
            :src="
              data.thumbnailPicUrl +
              '?x-oss-process=image/resize,m_lfit,h_40,w_40'
            "
          />
          <button class="drop-btn" v-if="node.data.level > 0 && draggable">
            <i class="iconfont icontuodongdian"></i>
          </button>
          <div
            class="node-label-wrap"
            :class="{ 'label-weight': node.data.level <= 1 }"
          >
            <el-tooltip
              :disabled="data.label.length < 8"
              effect="dark"
              :content="data.label"
              placement="top"
            >
              <span class="node-label">{{ data.label }}</span>
            </el-tooltip>
          </div>
          <span
            class="set-tree-type"
            @click.stop="handleShow($event, node, data)"
          >
            <i class="iconfont iconsangedian" style="font-size: 24px"></i>
          </span>
        </div>
      </el-tree>
    </div>
    <div
      class="category-name-pic"
      :class="{ upload: isProduct }"
      v-show="isHandlerCategoryMenuShow"
      ref="operateSection"
    >
      <UploadCategoryPic
        v-if="isHandlerCategoryMenuShow"
        :isUpload="isProduct ? true : false"
        :modifyCategoryData="modifyCategoryData"
        :clickNode="curClickNode"
        @createCategory="createCategory"
        @closeUploadCategoryPic="closeUploadCategoryPic"
      />
    </div>
    <div
      @click="closeUploadCategoryPic1"
      class="tree-handle"
      ref="operateSection1"
    >
      <button type="text" size="mini" @click="create">添加子分类</button>
      <button type="text" size="mini" @click="rename">修改名称</button>

      <button type="text" size="mini" @click="batchRemove">删除分类</button>
    </div>
  </div>
</template>
<script>
import { trim } from "@/utlis/index";
import UploadCategoryPic from "@/components/ProductManage/uploadCategoryPic";
export default {
  // picSearchOptions
  props: [
    "treeResult",
    "listOptions",
    "isArticle",
    "isProduct",
    "isPopup",
    "type",
    "siteCountInfo",
  ], // 与产品分类不一致的地方 picSearchOptions isPopup是否为图片弹框
  components: {
    UploadCategoryPic,
  },
  data() {
    return {
      draggable: true, // 是否允许拖拽
      flag: false,
      curId: null,
      treeNodeId: null,
      renameShowId: null,
      isNewAdd: false, // false 允许创建子节点
      curlabelName: "",
      isRename: false,
      newAddNode: "",
      renameData: "",
      createCategoryData: "", // 当前点击的创建分类节点
      isAdd: false, // true 添加 false编辑
      modifyCategoryData: {}, // 编辑分类需要传当前节点的名称和imgurl,
      curClickNode: { data: { level: "" } },
      isHandlerCategoryMenuShow: false,
      isChangeCategoryShow: false,
      categoryId: 0,
    };
  },
  mounted() {
    document.addEventListener("click", () => {
      this.$nextTick(() => {
        if (this.$refs.operateSection1)
          this.$refs.operateSection1.style.display = "none";
      });
    });
    this.draggable = this.isContentwrite;
  },
  methods: {
    createCategory(displayName, thumbnailPicUrl, Language) {
      if (this.isAdd) {
        if (this.isArticle) {
          this.$emit("create", {
            CategoryName: trim(displayName),
            ParentId: this.createCategoryData.ParentId,
            id: this.createCategoryData.id,
            displayOrder: this.createCategoryData.displayOrder,
          });
        } else {
          this.$emit("create", {
            CategoryName: trim(displayName),
            ParentId: this.createCategoryData.ParentId,
            id: this.createCategoryData.id,
            displayOrder: this.createCategoryData.displayOrder,
          });
        }
      } else {
        this.$emit("rename", {
          CategoryName: trim(displayName),
          ParentId: this.createCategoryData.ParentId,
          id: this.createCategoryData.id,
          displayOrder: this.createCategoryData.displayOrder,
        });
      }
      this.closeUploadCategoryPic();
    },
    handlerOver(data) {
      if (!isNaN(data.id)) this.treeNodeId = data.id;
      if (this.isNewAdd) this.treeNodeId = null;
    },
    selectCategoryByNodeId(nodeId) {
      nodeId = nodeId || 0;
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(nodeId);
      });
    },
    handlerMouseLeave() {
      this.treeNodeId = this.curId = null;
    },
    cancelhadnleTreeInput(data, node) {
      if (this.isRename) {
        if (data.label == "") {
          this.$notify({
            customClass: "notify-warning", //  notify-success ||  notify-error
            message: `分类名称不能为空!`,
            showClose: false,
            duration: 1500,
          });
          return;
        }
        if (this.curlabelName != "") {
          data.label = this.curlabelName;
        }
      } else {
        node.parent.childNodes.splice(0, 1);
        this.isRename = false;
        this.isNewAdd = false;
      }
      // 点击取消按钮 关闭input框
      this.renameShowId = this.curId = null;
    },
    handleDragEnd(draggingNodeDom, targetNodeDom, dropType, ev) {
      var draggingNode = draggingNodeDom.data;
      var targetNode = targetNodeDom.data;
      // let level = this.getLevel(draggingNodeDom, 1) + targetNodeDom.level;
      let eles = document.getElementsByClassName("el-tree-node__content");
      for (let i = 0; i < eles.length; i++) {
        let ele = eles[i];
        ele.style.background = "";
      }
      switch (dropType) {
        case "inner": {
          draggingNode.parentId = targetNode.id;
          break;
        }
        case "before":
        case "after": {
          draggingNode.parentId = targetNode.parentId ? targetNode.parentId : 0;
          break;
        }
        case "none":
          return;
        default: {
          return;
        }
      }

      var idOrderByArr = [];
      for (var i = 0; i < targetNodeDom.parent.childNodes.length; i++) {
        var childNode = targetNodeDom.parent.childNodes[i];
        idOrderByArr.push(childNode.data.id);
      }
      this.modifyNode(draggingNode.id, draggingNode.parentId, idOrderByArr);
    },
    allowDrop(draggingNode, targetNode, dropType) {
      if (targetNode.data.level == 0) return;
      draggingNode = draggingNode.data;
      targetNode = targetNode.data;
      //判断是否大于三层
      if (
        dropType === "inner" ||
        draggingNode.parentId !== targetNode.parentId
      ) {
        let level = this.getLevel(draggingNode, 1) + targetNode.level;
        return level <= 3;
      }
      return true;
    },
    allowDrag(draggingNode) {
      return draggingNode.data.level !== 0;
    },
    dragEnter(draggingNode, targetNode, ev) {
      if (targetNode.data.level == 0) return;
      let eles = document.getElementsByClassName("el-tree-node__content");
      for (let i = 0; i < eles.length; i++) {
        let ele = eles[i];
        ele.style.background = "";
      }
      ev.srcElement.style.background = "#F8FAFC";
    },
    // 添加分类  0720
    create(ev, node, data) {
      this.modifyCategoryData = {}; //创建新分类 不需传
      this._handleShowMoreOperate(ev, node, data);
      this.isAdd = true;
    },
    getAllNodeIds(node, isChildNode) {
      var idList = isChildNode ? [] : [node.id];
      for (var i in node.children) {
        let child = node.children[i];
        idList.push(child.id);
        idList = idList.concat(this.getAllNodeIds(child, true));
      }
      return idList;
    },
    getLevel(node, level) {
      var localLevel = level;
      for (var i in node.children) {
        let child = node.children[i];
        var childLevel = this.getLevel(child, localLevel + 1);
        level = level < childLevel ? childLevel : level;
      }
      return level;
    },
    // 编辑分类 0720
    rename(ev, node, data) {
      this.isAdd = false;
      this.modifyCategoryData = this.curClickData;
      this._handleShowMoreOperate(ev, node, data);
    },
    modifyNode(id, parentId, idOrderByArr) {
      this.$emit("modifyNode", id, parentId, idOrderByArr);
    },
    // 描述： 删除分类
    batchRemove(node, data) {
      data = this.curClickData;
      this.$emit("batchRemove", this.getAllNodeIds(data));
    },
    // 点击节点的时候
    changeCategory(data) {
      if (this.categoryId == data.id) {
        return;
      }
      this.categoryId = data.id;
      if (this.type !== "news") {
        this.listOptions.categoryIdList = this.getAllNodeIds(data);
      }
      this.closeUploadCategoryPic();
      this.closeUploadCategoryPic1();
      this.listOptions.pageIndex = 1; // 与产品分类不一致的地
      this.$emit("chooseCategoryNode", data); // 与产品分类不一致的地方
      this.$emit("getList", data);
    },
    // 取消第一个全部分类默认选中的样式
    setCss(obj, css) {
      for (var attr in css) {
        obj.style[attr] = css[attr];
      }
    },
    // 操作按钮出现 || 消失
    handleShow(ev, node, data) {
      if (this.curId === node.data.id) {
        node.checked = false;
        this.curId = 1;
      } else {
        node.checked = true;
        this.curId = node.data.id;
      }
      this.curClickData = data;
      this.curClickNode = node;

      this._handleShowMoreOperate1(ev, node);
    },
    // 分类上传图片
    _handleShowMoreOperate(ev, node, data) {
      const winH = document.documentElement.clientHeight;
      const boxH = 150;
      this.createCategoryData = this.curClickData;
      if (this.isPopup) {
        let location = this.handlerClicklocation();
        this.$refs.operateSection.style.left =
          ev.pageX - location.clientWidth - ev.offsetX + 8 + "px";
        this.$refs.operateSection.style.top =
          ev.pageY - location.clientHeight - ev.offsetY + "px";
      } else {
        this.$refs.operateSection.style.left =
          ev.pageX - ev.offsetX + 16 + "px";
        this.$refs.operateSection.style.top =
          ev.pageY + boxH + ev.offsetY > winH
            ? winH - boxH + "px"
            : ev.pageY - ev.offsetY + "px";
      }
      // this.$refs.operateSection.style.display = "block";
      this.isHandlerCategoryMenuShow = true;
    },
    // 关闭 分类操作菜单显示
    closeUploadCategoryPic() {
      // this.$refs.operateSection.style.display = "none";
      this.isHandlerCategoryMenuShow = false;
    },
    // 新增 0730  关闭分类操作菜单
    closeUploadCategoryPic1() {
      this.$refs.operateSection1.style.display = "none";
    },
    handleCategory1() {
      this.closeUploadCategoryPic1();
    },
    // 新增0730   分类操作菜单显示
    _handleShowMoreOperate1(ev, row) {
      const winH = document.documentElement.clientHeight;
      const boxH = 100;
      if (this.isPopup) {
        let location = this.handlerClicklocation();
        this.$refs.operateSection1.style.left =
          ev.pageX - location.clientWidth - ev.offsetX + 32 + "px";
        this.$refs.operateSection1.style.top =
          ev.pageY - location.clientHeight - ev.offsetY + "px";
      } else {
        this.$refs.operateSection1.style.left =
          ev.pageX - ev.offsetX + 32 + "px";
        this.$refs.operateSection1.style.top =
          ev.pageY + boxH + ev.offsetY > winH
            ? winH - boxH + "px"
            : ev.pageY - ev.offsetY + "px";
      }
      if (this.$refs.operateSection1.style.display === "block") {
        this.$refs.operateSection1.style.display = "none";
      } else {
        this.$refs.operateSection1.style.display = "block";
      }
    },
    handlerClicklocation() {
      let content = document.getElementsByClassName("contentDialog")[0];
      let contentW = parseFloat(getComputedStyle(content).width);
      let contentH = parseFloat(getComputedStyle(content).height);
      let clientWidth =
        ((document.documentElement.clientWidth || document.body.clientWidth) -
          contentW) /
        2;
      let clientHeight =
        ((document.documentElement.clientHeight || document.body.clientHeight) -
          contentH) /
        2;
      return { clientWidth, clientHeight };
    },
  },
  computed: {
    isContentwrite() {
      return this.$store.state.dashboard.isContentwrite;
    },
  },
};
</script>
<style lang="scss" scoped>
// 侧边分类树节点

.aside-tree /deep/ .el-tree .el-tree-node__expand-icon.expanded {
  color: #a1a8b1;
}
.aside-tree /deep/ .el-tree .el-tree-node__expand-icon {
  color: #a1a8b1;
}
.aside-tree /deep/ .el-tree .is-leaf {
  color: transparent;
}
</style>
